<script lang="ts" setup>
import { computed, ref } from 'vue';

defineOptions({
  name: 'CzDiamondLoading'
});
const props = defineProps({
  size: {
    type: Number,
    default: 40
  },
  bgColor: {
    type: String,
    default: '#41b883'
  }
});
const _diamondStyle = ref({
  width: `${parseInt(`${props.size / 4}`, 10)}px`,
  height: `${parseInt(`${props.size / 4}`, 10)}px`,
  '--cz-diamond-bg-color': props.bgColor
});
console.log(_diamondStyle.value);
const diamondStyle = computed(() => _diamondStyle.value);
const styles = computed(() => {
  return {
    width: `${props.size}px`,
    height: `${parseInt(`${props.size / 4}`, 10)}px`
  };
});
</script>

<template>
  <div
    :style="styles"
    class="cz-spinner cz-relative spinner--rotate-diamond"
  >
    <div
      :style="diamondStyle"
      class="cz-diamond"
    />
    <div
      :style="diamondStyle"
      class="cz-diamond"
    />
    <div
      :style="diamondStyle"
      class="cz-diamond"
    />
  </div>
</template>

<style lang="scss" scoped>
$accent: #41b883;
$duration: 1500ms;
$timing: linear;
$count: 4;
.cz-spinner {
  * {
    line-height: 0;
    box-sizing: border-box;
  }

  .cz-diamond {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 2px;
    background: var(--cz-diamond-bg-color);
    transform: translateX(-50%) rotate(45deg) scale(0);
    animation: diamonds $duration $timing infinite;
    @for $i from 1 through $count {
      &:nth-child(#{$i}) {
        animation-delay: -(calc($duration / 1.5) * $i);
      }
    }
  }
}

@keyframes diamonds {
  50% {
    left: 50%;
    transform: translateX(-50%) rotate(45deg) scale(1);
  }
  100% {
    left: 100%;
    transform: translateX(-50%) rotate(45deg) scale(0);
  }
}
</style>
